<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<meta name="viewport" 
		content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<title>EdgeToEdgeStoreList - updates</title>

	<script type="text/javascript" src="../deviceTheme.js" 
		data-dojo-config="mblThemeFiles: ['base', 'Button']"></script>
	<script type="text/javascript" src="../../../dojo/dojo.js" 
		data-dojo-config="async: true, parseOnLoad: true"></script>

	<script type="text/javascript">
		require([
			"dojo/_base/lang",
			"dojo/_base/array",
			"dojo/store/Memory",
			"dojo/store/Observable",
			"dijit/registry",
			"dojox/mobile/parser",
			"dojox/mobile",
			"dojox/mobile/compat",
			"dojox/mobile/EdgeToEdgeStoreList",
			"dojox/mobile/Button"
		], function(lang, array, Memory, Observable, registry){
			var updateCounter = 0;
			
			var static_data1 = [
				{ id: 1, text: "Category 1", header: true },
				{ id: 2, text: "Wi-Fi", profile_image_url: "images/i-icon-1.png", moveTo: "wifi" },
				{ id: 3, text: "Brightness & Wallpaper", profile_image_url: "images/i-icon-2.png", moveTo: "bright" },
				{ id: 4, text: "Picture Frame", profile_image_url: "images/i-icon-3.png", moveTo: "picture" },
				{ id: 5, text: "General", profile_image_url: "images/i-icon-4.png", moveTo: "general", "selected": "true" },
				{ id: 6, text: "Mail, Contacts, Calendars", profile_image_url: "images/i-icon-5.png", moveTo: "wifi" },
				{ id: 7, text: "Safari", profile_image_url: "images/i-icon-6.png", moveTo: "bright" },
				{ id: 8, text: "iPod", profile_image_url: "images/i-icon-7.png", moveTo: "picture" },
				{ id: 9, text: "Category 2", header: true },
				{ id: 10, text: "Video", profile_image_url: "images/i-icon-8.png", moveTo: "general" },
				{ id: 11, text: "Photos", profile_image_url: "images/i-icon-9.png", moveTo: "wifi" },
				{ id: 12, text: "Store", profile_image_url: "images/i-icon-10.png", moveTo: "bright" }
			];

			var static_data2 = [
				{id: 1, label: "Apple", 	moveTo: "dummy"},
				{id: 2, label: "Banana", 	moveTo: "dummy"},
				{id: 3, label: "Cherry", 	moveTo: "dummy"},
				{id: 4, label: "Grape", 	moveTo: "dummy"},
				{id: 5, label: "Kiwi", 	moveTo: "dummy"},
				{id: 6, label: "Lemon", 	moveTo: "dummy"},
				{id: 7, label: "Melon", 	moveTo: "dummy"},
				{id: 8, label: "Orange", 	moveTo: "dummy"},
				{id: 9, label: "Peach", 	moveTo: "dummy"}
			];
			store1 = Observable(new Memory({data: static_data1}));
			store2 = Observable(new Memory({data: static_data2}));
			store1.__counter = store2.__counter = 1;
			store = store1;

			// switch to the selected store
			switchTo = function(store){
				window.store = store;
				registry.byId("list").setStore(store);
			};
			// add a new item
			add1 = function(){
				store.add({
					id: 100 + store.__counter,
					label: "New Item "+(store.__counter++),
					icon: "images/i-icon-1.png",
					moveTo: "dummy"
				});
			};
			// update the text or label of all items
			var updateSuffix = " update #";
			var updateUtil = function(str){
				// Skip the category items (for aesthetic reasons)
				if(str.indexOf("Category") == 0){
					return str;
				}
				var idx = str.indexOf(updateSuffix);
				return idx >= 0 ?
					// already updated: just update the counter
					str.substring(0, idx) + updateSuffix + updateCounter :
					// first update: append to str
					str + updateSuffix + updateCounter;
			};
			
			update1 = function(){
				updateCounter++;
				array.forEach(store.query({}), function(item, i){
					// Changes of the data items of the store must only be done
					// through the API of the store. Hence the cloning.
					var newItem = lang.clone(item);
					if(newItem.text){
						newItem.text = updateUtil(newItem.text);
					}else{
						newItem.label = updateUtil(newItem.label)
					}
					store.put(newItem);
				});
			};
			// delete the added item
			delete1 = function(){
				if(store.__counter > 1){
					store.remove(100 + (--store.__counter));
				}
			};
		});
	</script>
</head>
<body style="visibility:hidden;">
	<div data-dojo-type="dojox/mobile/View">
		<h1 data-dojo-type="dojox/mobile/Heading">EdgeToEdgeStoreList</h1>
		<ul data-dojo-type="dojox/mobile/EdgeToEdgeStoreList" id="list" 
			data-dojo-props='store: store, query: {}, itemMap: {text:"label", profile_image_url: "icon"}'>
		</ul>
		<p>Select the data store:<br>
		<input data-dojo-type="dojox/mobile/Button" type="button" value="Set1" 
			onclick="switchTo(store1)">
		<input data-dojo-type="dojox/mobile/Button" type="button" value="Set2" 
			onclick="switchTo(store2)">
		<p>Alter the data store:<br>
		<input data-dojo-type="dojox/mobile/Button" type="button" value="Add" 
			onclick="add1()">
		<input data-dojo-type="dojox/mobile/Button" type="button" value="Update" 
			onclick="update1()">
		<input data-dojo-type="dojox/mobile/Button" type="button" value="Delete" 
			onclick="delete1()">
	</div>
</body>
</html>
